import style from "./setting.module.scss";

import {
  Space,
  Table,
  Tag,
  message,
  Modal,
  Button,
  Checkbox,
  Form,
  Input,
} from "antd";
import { useState, useEffect } from "react";
let Setting = () => {
  const [form] = Form.useForm();

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";
            if (tag === "loser") {
              color = "volcano";
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a
            onClick={() => {
              deleteItem(record);
            }}
            type="success"
          >
            Delete
          </a>
          <a
            onClick={() => {
              EditItem(record);
            }}
            type="success"
          >
            Edit
          </a>
        </Space>
      ),
    },
  ];
  const [open, setOpen] = useState(false);

  let [data, setData] = useState([
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ]);
  let deleteItem = (e) => {
    if (data.length == 1) {
      message.info(`至少保留一条数据`);
      return;
    }
    setData((pre) => {
      return pre.filter((item) => item.key !== e.key);
    });
  };
  let [id, setId] = useState("");
  let EditItem = (e) => {
    setId(e.key);
    setOpen(true);
    form.setFieldsValue({ name: e.name, age: e.age });
  };
  const showModal = () => {
    setOpen(true);
  };

  const hideModal = () => {
    setOpen(false);
  };

  const onFinish = (values) => {
    console.log("Success:", values);
    setData((pre) => {
      return pre.map((item) => {
        if (item.key == id) {
          console.log(item);
          return {
            ...item,
            name: values.name,
            age: values.age,
          };
        }

        return item;
      });
    });
    setOpen(false);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  let handleCancel = () => {
    setOpen(false);
  };
  let EditModal = () => {
    return (
      <>
        <Modal
          title="you know what this"
          open={open}
          onOk={hideModal}
          onCancel={hideModal}
          okText="确认"
          cancelText="取消"
          footer={[
            <Button key="cancel" onClick={handleCancel}>
              取消
            </Button>,
            <Button key="submit" type="primary" onClick={() => form.submit()}>
              提交
            </Button>,
          ]}
        >
          <Form
            form={form}
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="name"
              name="name"
              rules={[
                {
                  required: true,
                  message: "Please input your name!",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="age"
              name="age"
              rules={[
                {
                  required: true,
                  message: "Please input your age!",
                },
              ]}
            >
              <Input />
            </Form.Item>
          </Form>
        </Modal>
      </>
    );
  };
  return (
    <>
      <div>
        <Table columns={columns} dataSource={data} />;<EditModal></EditModal>
      </div>
    </>
  );
};

export { Setting };
